<template>
  <div id="cesiumContainer"></div>
</template>

<script>
import "cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "cesium";
Cesium.Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NjZhNDhlMC03MzAzLTRhNDctODE1Ni1hODBhNmQ2OGVmYWEiLCJpZCI6NDQ1MjIsImlhdCI6MTYxNDEzNTQwOH0.caKOAbyp09ksGKn-fRKl29ZgxCzzCabj68IYbTJZRy8";

export default {
  name: "Map",
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // const viewer = new Cesium.Viewer("cesiumContainer", {
      //   terrainProvider: Cesium.createWorldTerrain(),
      // });
      // // Add Cesium OSM Buildings, a global 3D buildings layer.
      // const buildingTileset = viewer.scene.primitives.add(
      //   Cesium.createOsmBuildings()
      // );
      // // Fly the camera to San Francisco at the given longitude, latitude, and height.
      // viewer.camera.flyTo({
      //   destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      //   orientation: {
      //     heading: Cesium.Math.toRadians(0.0),
      //     pitch: Cesium.Math.toRadians(-15.0),
      //   },
      // });
      // let viewer = new Cesium.Viewer("cesiumContainer",{
      //     geocoder:false,
      //     homeButton:false,
      //     sceneModePicker:false,
      //     baseLayerPicker:false,
      //     navigationHelpButton:false,
      //     animation:false,
      //     // creditContainer:"credit",
      //     timeline:false,
      //     fullscreenButton:false,
      //     vrButton:false,
      // });
      var viewer = new Cesium.Viewer("cesiumContainer");

      //通过entities实体添加立方体
      // var redBox = viewer.entities.add({
      //   name: "Red box with black outline",
      //   //立方体位置
      //   position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 3000.0),
      //   box: {
      //     //立方体长宽高
      //     dimensions: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
      //     //立方体的颜色
      //     material: Cesium.Color.RED.withAlpha(0.5),
      //     //是否显示外边框
      //     outline: true,
      //     outlineColor: Cesium.Color.BLACK,
      //   },
      // });

      // viewer.zoomTo(viewer.entities);

      //通过czml添加几何体
      var czml = [
        {
          id: "document",
          name: "box",
          version: "1.0",
        },
        {
          id: "shape2",
          name: "Red box with black outline",
          position: {
            cartographicDegrees: [-107.0, 40.0, 300000.0],
          },
          box: {
            dimensions: {
              cartesian: [400000.0, 300000.0, 500000.0],
            },
            material: {
              solidColor: {
                color: {
                  rgba: [255, 0, 0, 128],
                },
              },
            },
            outline: true,
            outlineColor: {
              rgba: [0, 0, 0, 255],
            },
          },
        },
      ];

      var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
      viewer.dataSources.add(dataSourcePromise);
      viewer.zoomTo(dataSourcePromise);

      //显示帧数
      viewer.scene.debugShowFramesPerSecond = true;

      let imageryLayers = viewer.imageryLayers;

      let googleMap = new Cesium.UrlTemplateImageryProvider({
        url: "http://www.google.com/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}",
      });

      imageryLayers.addImageryProvider(googleMap);

      // fly
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          114.296063,
          30.55245,
          20000000
        ),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-90),
          roll: 0.0,
        },
        duration: 10, // fly time 10s
      });
      
    },
  },
};
</script>

<style lang="scss" scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
/deep/.cesium-viewer-bottom {
  display: none;
}
</style>